<template>
  <div class="box">
    <div :id="id" v-loading="listLoading" :style="{height:height,width:width} " />
  </div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/dark')
import { updateLineChart } from '@/api/dataManagement'
import resize from '@/components/Charts/mixins/resize'
import { fetchEquipmentInfo } from '@/api/equipment-card'
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    equipmentNumber: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '320px'
    },
    date: {
      type: Array
    }
  },
  data() {
    return {
      value: '',
      i1data: [],
      i2data: [],
      i3data: [],
      i4data: [],
      equipmentNumberOptions: [],
      temp: { equipmentNumber: 'bd16265282985790001', date: null },
      listLoading: true,
      equipmentName: ''
    }
  },
  watch: {
    equipmentNumber() {
      this.temp.date = this.date
      this.temp.equipmentNumber = this.equipmentNumber
      fetchEquipmentInfo(this.temp.equipmentNumber).then((res) => {
        this.equipmentName = res.data.equipmentName
        setTimeout(() => {
        }, 1.5 * 1000)
        this.update()
      })
    },
    date() {
      this.temp.date = this.date
      this.temp.equipmentNumber = this.equipmentNumber
      this.update()
    }
  },
  created() {
  },
  mounted() {
    this.timer = setInterval(this.update, 1000 * 60 * 15)
    this.temp.date = this.date
    this.temp.equipmentNumber = this.equipmentNumber
    fetchEquipmentInfo(this.temp.equipmentNumber).then((res) => {
      this.equipmentName = res.data.equipmentName
      setTimeout(() => {
      }, 1.5 * 1000)
      this.update()
    })
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    clearInterval(this.timer)
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    update() {
      this.listLoading = false
      updateLineChart(this.temp).then((res) => {
        this.i1data = res.data.i1data
        this.i2data = res.data.i2data
        this.i3data = res.data.i3data
        this.i4data = res.data.i4data
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
        this.chart.setOption({
          // title: {
          //   text: this.equipmentName,
          //   color: 'rgba(23, 221, 39, 1)'
          // },
          series: [
            {
              data: this.i1data
            },
            {
              data: this.i2data
            }
          ]
        })
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      this.chart.setOption({
        title: {
          text: '当前设备:',
          color: 'rgba(23, 221, 39, 1)',
          textStyle: {
            fontSize: 25,
            color: 'rgba(23, 221, 39, 1)'
          },
          left: '5%',
          top: '5%'
        },
        colorBy: 'data',
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: 15,
          icon: 'rect',
          itemWidth: 30,
          itemHeight: 5,
          itemGap: 80,
          data: ['保护侧电位', '未保护侧电位'],
          right: '3%',
          textStyle: {
            fontSize: 20,
            color: 'white'
          }
        },
        grid: {
          top: 80,
          left: '5%',
          right: '6%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          boundaryGap: ['40%', '40%'],
          name: '',
          type: 'time',
          nameGap: 1,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              width: 1
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            },
            onZero: false
          },
          axisLabel: {
            show: true,
            fontStyle: 'italic',
            fontWeight: 'bold'
          },
          // maxInterval: 3600 * 1000,
          minorTick: {
            show: true,
            splitNumber: 3
          }
        },
        yAxis: [{
          type: 'value',
          name: '电位',
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          axisLabel: {
            formatter: '{value} V',
            margin: 10,
            textStyle: {
              fontSize: 14
            },
            fontStyle: 'italic',
            fontWeight: 'bold'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              width: 1
            }
          }
        }],
        series: [
          {
            name: '保护侧电位',
            type: 'line',
            showSymbol: true,
            data: this.i1data,
            color: '#fd666d'
          },
          {
            name: '未保护侧电位',
            type: 'line',
            showSymbol: true,
            data: this.i2data,
            color: '#37a2da'
          }
        ]
      })
      this.update()
    }
  }
}
</script>
<style scoped>
.box {
  /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
  box-shadow: 0 8px 16px 0;
  transition: 0.3s;
  width: 100%;
  border-radius: 10px;
  /*background-color: #2c3e50;*/
}

.box:hover {
  /*box-shadow: 0 8px 16px 0;*/
}
</style>
